<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      mode="horizontal"
      @select="menuSelect"
      text-color="#E6A23C"
      active-text-color="#E6A23C"
    >
      <el-row>
        <el-col :span="20">
          <el-menu-item index="1">充值方案</el-menu-item>
        </el-col>
        <el-col
          :span="4"
          style="line-height:56px"
        >
          <el-button
            type="primary"
            size="small"
            @click="dialogVisible=true"
          >任意充值</el-button>
        </el-col>
        <el-dialog
          title="任意充值"
          :visible.sync="dialogVisible"
          width="width"
        >
          <div>
            <el-form label-width="80px">
              <el-form-item label="充值金额">
                <el-input
                  v-model="money"
                  placeholder="0"
                ></el-input>
                <span class="tishi">{{tishi}}</span>
              </el-form-item>
            </el-form>
          </div>
          <div slot="footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="chongzhi2"
            >充值</el-button>
          </div>
        </el-dialog>
      </el-row>
    </el-menu>
    <div class="
            content">
      <div class="card">
        <div class="chonzghi">
          <p>￥<span class="price">10</span></p>
          <p style="padding-bottom:20px;font-size:13px">使用条件:充￥100赠送￥10</p>
        </div>
        <div>
          <el-button
            class="btn"
            type="info"
            plain
            @click="chongzhi(100,10)"
          >立即使用</el-button>
        </div>
      </div>
      <div class="card">
        <div class="chonzghi">
          <p>￥<span class="price">50</span></p>
          <p style="padding-bottom:20px;font-size:13px">使用条件:充￥200赠送￥50</p>
        </div>
        <div>
          <el-button
            class="btn"
            type="info"
            plain
            @click="chongzhi(200,50)"
          >立即使用</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "pay",
  data() {
    return {
      activeIndex: "1",
      money: "",
      num: "",
      tishi: "",
      dialogVisible: false,
    };
  },
  methods: {
    // 获取余额
    getyue() {
      this.$post(this.url+'/account/userAccount', {
        userId: this.$store.state.user.id,
      }).then((res) => {
        if (res.errorCode == 0) {
          this.num = res.data.amount;
        }
      });
    },
    menuSelect() {},
    chongzhi(num1, num2) {
      this.$post(this.url + "/account/recharge", {
        userId: this.$store.state.user.id,
        amount: num1 + num2,
      }).then((res) => {
        if (res.errorCode == 0) {
          this.$message.success("充值成功");
        }
      });
    },
    chongzhi2() {
      if (this.money == "") {
        this.tishi = "充值金额不能为空";
      } else if (this.money < 0) {
        this.tishi = "充值金额不能为负数";
      } else if (isNaN(this.money)) {
        this.tishi = "充值金额必须为数字";
      } else {
        this.$post(this.url + "/account/recharge", {
          userId: this.$store.state.user.id,
          amount: this.money,
        }).then((res) => {
          if (res.errorCode == "0") {
            this.$message({
              message: "充值成功",
              type: "success",
            });
            this.getyue();
            this.money = "";
          }
        });
        this.tishi = "";
        this.dialogVisible = false;
      }
    },
  },
  created() {
    this.getyue();
  },
};
</script>

<style scoped>
.tishi {
  color: red;
}
p {
  padding: 10px;
  margin: 0;
}
.card {
  width: 24%;
  margin: 25px;
}
.content {
  display: flex;
  flex-wrap: wrap;
}
.chonzghi {
  background-color: rgb(255, 108, 89);
  border-radius: 15px 15px 0 0;
  color: white;
}
.price {
  font-size: 25px;
}
.btn {
  width: 100%;
  border-radius: 0 0 15px 15px;
}
</style>